<template>
	<view class="member page bgf5">

		<view class="head cff flex flexC p16 boxS" @click="clickDetail">
			<image class="avatar r50" :src="logo" mode="aspectFill"></image>
			<view class="ml9 flex1">
				<view class="fs18 ellipsis1">{{data.name}}</view>
				<view class="fs13 mt2 flex flexC flexB">
					<text>店长 {{data.mobile}}</text>
					<view class="fs13 flex flexC">
<!-- 						<text>账号管理</text> -->
						<image class="arrow ml6" src="/static/img/icon/arrow.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="mt12">
					<text class="tag px7 py4 r6 fs12">门店ID {{data.store_no}}</text>
				</view>
			</view>

		</view>
		<view class="bgff box2 flex flexC py12 px20 r12 fs16 mx10">
			<view class="borr pr20" @click="clickWith">
				<view class="fs13">账户余额</view>
				<view class="mt2 fs26 c00 bold6">{{balance}}</view>
			</view>
			<view class="flex1 pl20" @click="clickOut">
				<view class="fs13">抵扣金额(元)</view>
				<view class="mt2 fs26 c00 bold6">{{out}}</view>
			</view>
			<view class="bg81 r40" @click="clickCharge">
				<text>立即充值</text>
				<text class="fs10 bgs r40 px6 cff">对帐单</text>
			</view>
		</view>

		<view class="bgff m10 box">
			<view class="titlebg p14 flex flexC">
				<text class="fs16 bold6">增值服务</text>
				<text class="flex1 px8">开通会员立即解锁商品同步功能</text>
				<view class="flex flexC ">
					<text class="fs12 bold6">去开通</text>
					<image class="arrow ml6" src="/static/img/icon/arrow2.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="fs16 p14">
				<text class="bold6">常用</text>
			</view>
			<view class="flex flexC flexW aliC mt18">
				<view class="w-5 mb10" @click="clickCai" >
					<image src="/static/img/icon/order.png" mode="aspectFill"></image>
					<view>采购订单</view>
				</view>


				<view class="w-5 mb12" @click="clickDetail">
					<!-- 	<image src="/static/img/icon/data.png" mode="aspectFill"></image>
					<view>经营数据</view> -->
					<image src="/static/img/icon/shop.png" mode="aspectFill"></image>
					<view>门店设置</view>
				</view>
				<view class="w-5 mb12" @click="clickHotel">
					<image src="/static/img/icon/peixong.png" mode="aspectFill"></image>
					<view>酒店管理</view>
				</view>
				<!-- <navigator url="/pages/member/join" class="w-5 mb12" hover-class="none">
					<image src="/static/img/icon/recharge.png" mode="aspectFill"></image>
					<view>三方充值</view>
				</navigator> -->
				<view class="w-5 mb12" @click="clickNotice">
					<image src="/static/img/icon/comment.png" mode="aspectFill"></image>
					<view>设置</view>
				</view>
			</view>
		</view>
		<view class="bgff m10 box">
			<view class="fs16 p14">
				<text class="bold6">配送</text>
			</view>
			<view class="flex flexC flexW aliC mt18">
				<view class="w-5 mb10" @click="clickMtAuth">
					<image src="/static/img/icon/waimai.png" mode="aspectFill"></image>
					<view>外卖绑定</view>
				</view>
				<view class="w-5 mb12" @click="clickSendSet">
					<image src="/static/img/icon/manage.png" mode="aspectFill"></image>
					<view>配送管理</view>
				</view>
				<!-- <view class="w-5 mb12">
					<image src="/static/img/icon/shop.png" mode="aspectFill"></image>
					<view>门店管理</view>
				</view> -->
				<view @click="clickPrintSet" class="w-5 mb12" hover-class="none">
					<image src="/static/img/icon/point.png" mode="aspectFill"></image>
					<view>打印设置</view>
				</view>
				<view class="w-5 mb12" @click="clickDevice">
					<image src="/static/img/icon/set.png" mode="aspectFill"></image>
					<view>无人店管理</view>
				</view>
			</view>
		</view>
		<tabbar></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgImg: 'https://qhy2023.oss-cn-hangzhou.aliyuncs.com/uploads/20230419/7576623e875153f10308bebe4d0b9f91.png',
				bgImg2: 'https://qhy2023.oss-cn-hangzhou.aliyuncs.com/minapp/coubg.png',
				bgImg3: 'https://qhy2023.oss-cn-hangzhou.aliyuncs.com/minapp/coubg.png',
				username: '',
				avatar: '',
				mobile: '',
				code: '',
				avatarPath: '',
				tel: '4008885626',
				balance: 0,
				tuan: 0,
				shop_id: '',
				bssid: '',
				wifi_info: null,
				platform: '',
				coupon: 0,
				data: null,
				logo: '/static/logo.jpg',
				balance:0,
				out:0
			};
		},
		onLoad() {
			uni.hideHomeButton();

		},

		onShow() {

			this.getIndex();
		},

		methods: {
			
			clickMtAuth(){
				uni.showToast({
					icon:'none',
					title:"正在开发"
				})
			},
			
			clickSendSet(){
				uni.showToast({
					icon:'none',
					title:"正在开发"
				})
			},
			
			clickPrintSet(){
				uni.showToast({
					icon:'none',
					title:"正在开发"
				})
			},
			
			clickDevice(){
				uni.navigateTo({
					url:'/other/device/device'
				})
			},
			
			clickOut(){
				uni.navigateTo({
					url:'../member/outcome'
				})
			},
			
			clickCharge(){
				uni.navigateTo({
					url:'../member/charge'
				})
			},
			
			clickWith(){
				uni.navigateTo({
					url:'../member/cashIndex'
				})
			},
			
			clickNotice(){
				uni.navigateTo({
					url:'../member/noticeMode'
				})
			},
			
			clickDetail(){
				uni.navigateTo({
					url:'../member/detail'
				})
			},
			clickHotel(){
				uni.navigateTo({
					url:'/other/hotel/list'
				})
			},
			
			clickCai(){
				uni.navigateTo({
					url:'/other/cai/orderList'
				})
			},
		
			getIndex() {


				let param = {
					shop_id: uni.getStorageSync("shop_id")
				}
				let that = this;
				this.$api.commonIndex(param).then(res => {

					if (res.code == 1) {

						that.data = res.data;
						that.balance = res.data.balance;
						that.out = res.data.out;
						if (res.data.logo != '') {
							that.logo = res.data.logo;
						}
					} else {

					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.member {
		.kf {
			position: fixed;
			top: 30rpx;
			right: 20rpx;
			z-index: 99;
			background-color: #fff;
			border-radius: 80rpx;
			padding: 6rpx 14rpx;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.w-5 {
			width: 25%;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.arrow {
			width: 14rpx;
			height: 28rpx;
		}

		.head {
			position: relative;
			padding-bottom: 120rpx;
			width: 100%;
			background-repeat: no-repeat;
			background-position: center;
			background: #FD449B;

			.avatar {
				width: 100rpx;
				height: 100rpx;
				border: 4rpx solid #fff;
			}

			.tag {
				background-color: #DB0E6E;
			}

			.bg34 {
				background: linear-gradient(to bottom, #7B7B7B, #3A3A3A, #3A3A3A);

				.bgb5 {
					background-color: #B5B5B5;
					border-radius: 0 80rpx 80rpx 0;
				}
			}
		}

		.box2 {
			position: relative;
			margin-top: -74rpx;

			.borr {
				border-right: 2rpx solid #d1d1d1;
			}

			.bg81 {
				color: #FD449B;
				border: 2rpx solid #FD449B;
				width: 182rpx;
				text-align: center;
				height: 68rpx;
				line-height: 68rpx;
				position: relative;

				.bgs {
					background-color: #EE8934;
					height: 28rpx;
					line-height: 28rpx;
					position: absolute;
					top: -20rpx;
					right: -14rpx;
				}
			}
		}

		.box {
			position: relative;

			.titlebg {
				background-color: #F7E3CB;
				color: #8F6227;

				.flex1 {
					color: #C09A68;
				}
			}
		}

		button {

			background: none;
			font-size: 10pt;
			padding-left: 0rpx;
		}

		button::after {
			border: none;

		}

		.bg {
			width: 100%;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
		}
	}
</style>